<template>
  <div class="data-v-play-bar">
    <div class="left">
      <div class="prev icon" @click="onPrevClick">
        <img src="./img/prev.png" alt="prev" />
      </div>
      <div class="play icon" @click="onPlayClick">
        <img src="./img/play.png" alt="play" />
      </div>
      <div class="next icon" @click="onNextClick">
        <img src="./img/next.png" alt="next" />
      </div>
    </div>
    <div class="center">
      <div class="current">{{ fmt(current) }}</div>
      <div class="bar">
        <div class="bar-inner" :style="sty" ref="barInner">
          <div class="pointer" @mouseover="ptShow = true" ref="pointer"></div>
          <div class="time-pointer" v-show="ptShow">{{ fmt(current) }}</div>
        </div>
      </div>
      <div class="duration">{{ fmt(duration) }}</div>
    </div>
    <div class="right">
      <div class="hd icon" :class="{ active: hd }" @click="onHdClick">
        <img src="./img/hd.png" alt="hd" />
      </div>
      <div class="vol icon">
        <img src="./img/vol.png" alt="volumn" />
      </div>
      <div class="set icon">
        <img src="./img/set.png" alt="setting" />
      </div>
      <div class="full icon">
        <img src="./img/full.png" alt="fullscreen" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "data-v-play-bar",
  props: {
    duration: {
      type: [Number, String],
      default: 0
    },
    current: {
      type: [Number, String],
      default: 0
    },
    hd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isPlay: false,
      ptShow: false,
      isDrag: false
    };
  },
  components: {},
  computed: {
    percentage() {
      return this.current / this.duration;
    },
    sty() {
      return {
        width: this.percentage * 100 + "%"
      };
    }
  },
  mounted() {
    // onMouseDown
    let self = this;
    let dom = this.$refs.pointer;
    let barInner = this.$refs.barInner;
    let bar = barInner.parentNode;

    let rect = bar.getBoundingClientRect();

    dom.addEventListener("mousedown", onMouseDown);
    dom.addEventListener("mouseout", onMouseOut);

    let x = 0;
    // let y = 0;

    function onMouseOut() {
      if (!self.isDrag) {
        self.ptShow = false;
      }
    }

    function onMouseDown(event) {
      self.ptShow = true;
      self.isDrag = true;
      x = event.pageX;
      // y = event.pageY;

      var rect = event.target.getBoundingClientRect();

      x -= rect.x;
      // y -= rect.y;

      document.addEventListener("mousemove", onMouseMove);
      document.addEventListener("mouseup", onMouseUp);
    }

    function onMouseMove(event) {
      let percentage = (event.pageX - rect.left + x) / rect.width;
      if (percentage > 1) {
        percentage = 1;
      } else if (percentage < 0) {
        percentage = 0;
      }
      // console.log("percentage", percentage);
      let cur = parseInt(percentage * self.duration);

      // requestUpdateCurrent
      self.$emit("update:current", cur);
      // barInner.style.width = percentage * 100 + "%";
    }

    function onMouseUp() {
      console.log("up");
      self.isDrag = false;
      self.ptShow = false;
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);
    }
  },
  methods: {
    fmt(seconds, d = ":") {
      let minutes = 0;
      let hour = 0;
      if (seconds > 60) {
        minutes = parseInt(seconds / 60);
        seconds = parseInt(seconds % 60);
        if (minutes > 60) {
          hour = parseInt(minutes / 60);
          minutes = parseInt(minutes % 60);
        }
      }
      const db = v => (v > 10 ? v : "0" + v);
      let res = db(hour) + d + db(minutes) + d + db(seconds);
      return res;
    },
    onHdClick() {
      this.$emit("update:hd", !this.hd);
    },
    onNextClick() {
      this.$emit("request-next");
    },
    onPlayClick() {
      this.isPlay = !this.isPlay;
      this.$emit("request-play", this.isPlay);
    },
    onPrevClick() {
      this.$emit("request-prev");
    }
  }
};
</script>
<style lang="less">
.data-v-play-bar {
  display: inline-flex;
  min-width: 730px;
  height: 74px;
  background: #172d39;
  font-size: 14px;
  color: lightblue;
  user-select: none;
  .left {
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;

    // .prev,
    // .play,
    // .next {
    //   margin: 0 5px;
    //   cursor: pointer;
    // }
    // .play{

    // }
    // .next{

    // }
  }

  .icon {
    margin: 0 5px;
    width: 20px;
    height: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    cursor: pointer;
    &:hover {
      box-shadow: 0 0 10px rgba(12, 217, 244, 0.56);
    }
    &.active {
      box-shadow: 0 0 10px rgba(12, 217, 244, 0.56);
      border-radius: 5px;
      // border-radius: 0;
      // background: #000;
      // border: 1px solid #77E0FC;
    }
  }

  .center {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .right {
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bar {
    flex: 1;
    height: 8px;
    background: #002234;
    margin: 0 10px;
    border-radius: 8px;

    .bar-inner {
      background: linear-gradient(to right, #226b8e, #0cd9f4);
      width: 50%;
      height: 100%;
      position: relative;
      border-radius: 8px;
    }
    .pointer {
      width: 12px;
      height: 12px;
      background: #77e0fc;
      position: absolute;
      top: -2px;
      right: -2px;
      border-radius: 50%;
      &:hover {
        cursor: pointer;
        box-shadow: 0 0 10px rgba(12, 217, 244, 0.56);
      }
    }
    .time-pointer {
      position: absolute;
      width: 60px;
      top: -24px;
      right: -56px;
      background: #226a8d;
      text-align: center;
      font-size: 12px;
      border-radius: 3px;
      border-bottom-left-radius: 0px;
    }
  }
}
</style>
